<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="4" :sm="8">
            <a-form-item label="订单编号">
              <a-input placeholder="请输入订单编号" v-model="queryParam.id"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="经销商">
              <a-input placeholder="请输入经销商名称" v-model="queryParam.companyName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="下单时间">
              <a-range-picker format="YYYY-MM-DD HH:mm:ss"
                              :style="{width: '277px'}"
                              :show-time="{
                                hideDisabledOptions: true,
                                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                              }"
                              :placeholder="['开始时间', '结束时间']"
                              @change="onCreateTimeChange"/>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="8">
            <a-form-item label="订单状态">
              <j-multi-select-tag :options="options_orderJX" v-model="status_MultiString" placeholder="请选择订单状态"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="4" :sm="8">
            <a-form-item label="收货人号码">
              <a-input placeholder="请输入收货人号码" v-model="queryParam.receiverPhone"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="销售人员">
              <a-input placeholder="请输入销售人员" v-model="queryParam.saleUserName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="6">
            <a-form-item
              label="渠道">
              <a-select
                v-decorator="[ 'channelId', {}]"
                v-model="queryParam.channelId"
                style="width: 100%"
                :getPopupContainer="node => node.parentNode"
                placeholder="请选择渠道">
                <a-select-option v-for="(channel,channelIdIndex) in ChannelList" :key="channel.id.toString()"
                                 :value="channel.id">
                  {{ channel.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <span style="float: left;overflow: hidden; "  class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
<!--    <div class="table-operator">-->
<!--      <a-button @click="handleAdd" type="primary" icon="plus">后台补发</a-button>-->
<!--      <a-button type="primary" icon="download" @click="handleExportXls('订单报表')">导出订单</a-button>-->
<!--      <a-button type="primary" icon="download" @click="handleExportOrderItem('订单明细报表')">导出订单明细</a-button>-->
<!--    </div>-->

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>
        <span>已选择</span>
        <a style="font-weight: 600">
          {{ selectedRowKeys.length }}
        </a>
        <span>项</span>
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :scroll="{ x: 1875 }"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <span slot="eStatus" slot-scope="text, record">
          <a-switch size="small" :checked="(!(text== null || text === 0))"/>
        </span>

        <span slot="action" slot-scope="text, record">
          <a @click="handleShowDetail(record)">查看</a>
          <a style="padding-left: 10px;" @click="handleTrace(record)">轨迹</a>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <omsOrder-modal ref="modalForm" @ok="modalFormOk"/>

    <oms-order-modal-j-x ref="OmsOrderModalJX" @ok="modalFormOk"/>

    <omsRequiregoods-modalJX ref="modalOAForm" @ok="modalFormOk"/>

    <oms-order-view-modalJX ref="OmsOrderViewModalJX" @ok="modalFormOk"/>

    <oms-order-process-memo-modal ref="OmsOrderProcessMemoModal" @ok="modalFormOk"/>

    <oms-order-edit-logistics-modalJX ref="OmsOrderEditLogisticsModalJX" @ok="modalFormOk"/>

    <oms-order-edit-apply-modalJX ref="OmsOrderEditApplyModalJX" @ok="modalFormOk"/>

    <oms-order-edit-freight-modal ref="OmsOrderEditFreightModal" @ok="modalFormOk"/>

    <oms-order-trace-modalJX ref="OmsOrderTraceModalJX" @ok="modalFormOk"/>
    <oms-order-finance-edit-apply-modalJX ref="OmsOrderFinanceEditApplyModalJX" @ok="modalFormOk"/>
    <omsOrderLogisticsEditApplyModalJX ref="OmsOrderLogisticsEditApplyModalJX" @ok="modalFormOk"/>
    <omsOrderEditPriceModalJX ref="OmsOrderEditPriceModalJX" @ok="modalFormOk"/>
    <returnOrderViewModal ref="ReturnOrderViewModal"  @ok="modalFormOk" />
  </a-card>
</template>

<script>

import {httpAction, downFile, getAction} from '@/api/manage'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import moment from 'moment'
import OmsOrderModal from './modules/OmsOrderModal'
import OmsOrderModalJX from './modules/OmsOrderModalJX'
import OmsOrderViewModalJX from './modules/OmsOrderViewModalJX'
import OmsOrderEditLogisticsModalJX from './modules/OmsOrderEditLogisticsModalJX'
import OmsOrderEditApplyModalJX from './modules/OmsOrderEditApplyModalJX'
import OmsOrderEditFreightModal from './modules/OmsOrderEditFreightModal'
import OmsOrderProcessMemoModal from './modules/OmsOrderProcessMemoModal'
import OmsOrderTraceModalJX from './modules/OmsOrderTraceModalJX'
import JMultiSelectTag from '../../components/dict/JMultiSelectTag'
import OmsRequiregoodsModalJX from './modules/OmsRequiregoodsModalJX'
import OmsOrderFinanceEditApplyModalJX from './modules/OmsOrderFinanceEditApplyModalJX'
import OmsOrderLogisticsEditApplyModalJX from './modules/OmsOrderLogisticsEditApplyModalJX'
import OmsOrderEditPriceModalJX from './modules/OmsOrderEditPriceModalJX'


export default {
  name: 'ReturnOrderList',
  mixins: [JeecgListMixin],
  components: {
    JMultiSelectTag,
    OmsRequiregoodsModalJX,
    OmsOrderModal,
    OmsOrderViewModalJX,
    OmsOrderEditLogisticsModalJX,
    OmsOrderEditApplyModalJX,
    OmsOrderEditFreightModal,
    OmsOrderProcessMemoModal,
    OmsOrderTraceModalJX,
    OmsOrderModalJX,
    OmsOrderFinanceEditApplyModalJX,
    OmsOrderLogisticsEditApplyModalJX,
    OmsOrderEditPriceModalJX

  },
  data() {
    return {
      description: '订单管理页面',
      ChannelList: [],
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '经销商',
          width: 200,
          align: 'center',
          dataIndex: 'storeId_dictText'
        },
        {
          title: '渠道',
          width: 120,
          align: 'center',
          dataIndex: 'channelName'
        },
        {
          title: '销售',
          width: 120,
          align: 'center',
          dataIndex: 'saleUserName'
        },
        {
          title: '订单编号',
          width: 160,
          align: 'center',
          dataIndex: 'orderSn'
        },
        {
          title: '订单状态',
          width: 90,
          align: 'center',
          dataIndex: 'statusJX_dictText'
        },
        {
          title: '下单时间',
          width: 170,
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '发货时间',
          width: 170,
          align: 'center',
          dataIndex: 'deliveryTime'
        },
        {
          title: '商品总金额',
          width: 100,
          align: 'center',
          dataIndex: 'totalAmount'
        },
        {
          title: '实付金额',
          width: 90,
          align: 'center',
          dataIndex: 'payAmount'
        },
        {
          title: '收货人',
          width: 120,
          align: 'center',
          dataIndex: 'receiverName'
        },
        {
          title: '物流公司',
          width: 150,
          align: 'center',
          dataIndex: 'deliveryCompany'
        },
        {
          title: '物流单号',
          width: 100,
          align: 'center',
          dataIndex: 'deliverySn'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          scopedSlots: {customRender: 'action'}
        }
      ],
      options_orderJX: [{
        label: "待跟单员审核",
        value: "7"
      }, {
        label: " 待物流审核",
        value: "10"
      }, {
        label: " 待财务审核",
        value: "9"
      }, {
        label: " 待销售确认",
        value: "0"
      },
        {
          label: "待发货",
          value: "1"
        }, {
          label: "待收货",
          value: "2"
        }, {
          label: "已完成",
          value: "3"
        }, {
          label: "已取消",
          value: "4"
        }],
      // 请求参数
      url: {
        list: '/oms/omsOrder/list',
        cancel: '/oms/omsOrder/cancel',
        payment: '/oms/omsOrder/payment',
        lockTime: '/oms/omsOrder/editLockTime',
        delete: '/oms/omsOrder/delete',
        deleteBatch: '/oms/omsOrder/deleteBatch',
        exportXlsUrl: 'oms/omsOrder/exportXls',
        exportXlsOrderItemUrl: 'oms/omsOrder/exportOrderItemXls',
        importExcelUrl: 'oms/omsOrder/importExcel',
        exportXlsForFinance: 'oms/omsOrder/exportXlsForFinance',
        channelListUrl: 'stm/stmChannelInfo/list',
      },
      status_MultiString: ''
    }

  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created() {
    this.queryParam.status_MultiString = '';
    this.queryParam.orderType=2;
    this.getChannelList();
  },
  watch: {
    status_MultiString(v) {
      this.queryParam.status_MultiString = this.status_MultiString
    }
  },
  methods: {
    moment,
    onStatusChange: function (value) {
      console.log(value)
      this.queryParam.status_MultiString = value
    },
    onCreateTimeChange: function (value, dateString) {
      console.log(dateString[0], dateString[1])
      this.queryParam.createTime_begin = dateString[0]
      this.queryParam.createTime_end = dateString[1]
    },
    handleCancelOrder(record) {
      var that = this
      if (record.statusJX === 1 || record.statusJX === 0 || record.statusJX === 6) {
        httpAction(that.url.cancel, {id: record.id}, 'put').then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.loadData();
          } else {
            that.$message.warning(res.message)
          }
        })
      } else {
        that.$message.warning('订单：' + record.id + ' 当前已不可取消')
      }

    },
    handleProcess(record, status) {
      console.log('1->');
      console.log(status);
      this.$refs.modalOAForm.add(record.id)
      this.$refs.modalOAForm.title = '订单审核'

    },
    handleShowDetail(record) {
      this.$refs.OmsOrderViewModalJX.show(record)
    },
    handleProcessMemo(record) {
      this.$refs.OmsOrderProcessMemoModal.show(record)
    },
    handleTrace(record) {
      this.$refs.OmsOrderTraceModalJX.show(record)
    },
    handleAdd() {
      this.$refs.OmsOrderModalJX.show()
    },
    initDictConfig() {
    },
    handleEditApply(record) {
      if (record.status == 9) {
        this.$refs.OmsOrderFinanceEditApplyModalJX.show(record)
      } else if (record.status == 10) {
        this.$refs.OmsOrderLogisticsEditApplyModalJX.show(record)
      } else {
        this.$refs.OmsOrderEditApplyModalJX.show(record)
      }
    },
    handleEditPrice(record) {
      this.$refs.OmsOrderEditPriceModalJX.show(record)
    },
    handleEditLogisticsApply(record) {
      this.$refs.OmsOrderEditLogisticsModalJX.show(record)
    },
    handleEditFreight(record) {
      if (record.statusJX === 0) {
        this.$refs.OmsOrderEditFreightModal.show(record)
      } else {
        this.$message.warning('订单：' + record.id + ' 当前已不可修改价格')
      }
    },
    getChannelList() {
      let param={};
      param.status=1;
      param.pageSize=100;
      getAction(this.url.channelListUrl, param).then(res => {
        if (res.success) {
          this.ChannelList = res.result.records;
          this.ChannelList.push({id:"",name:"请选择渠道"})
          this.ChannelList.reverse();
        } else {
          console.log(res.message)
        }
      })
    },
    handleExportOrderItem(fileName){
      if(!fileName || typeof fileName != "string"){
        fileName = "导出文件"
      }
      let param = {...this.getQueryParams()};
      if(this.selectedRowKeys && this.selectedRowKeys.length>0){
        param['selections'] = this.selectedRowKeys.join(",")
      }
      console.log("导出参数",param)
      downFile(this.url.exportXlsOrderItemUrl,param).then((data)=>{
        if (!data) {
          this.$message.warning("文件下载失败")
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
        }else{
          let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName+'.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      })
    },


  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
